<template>
  <div class="app-container overflow_yAuto">
    <div>
      <div class="role-list">
         <div slot="header" class="clearfix job-tab-header">
          <span>问题反馈</span>
        </div>
        
        <div>
        <div class="select-container" style="margin-top:0px">
            <el-row class="">
                <el-form ref="form"  label-position='center' :inline="true" size="small" label-width="110px">
                  <el-col :span="5">
                    <!-- 审核状态 -->
                      <el-form-item label="" prop="isInner" size='small' style="margin:12px 0px;">
                          <el-select v-model="status" clearable placeholder="请选择审核状态">
                              <el-option  v-for="item in listOption" :key="item.status" :label="item.label" :value="item.status">
                              </el-option>
                          </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label="" prop="name" size='small'  style="margin:12px 0px;">
                            <el-input prefix-icon="el-icon-search" placeholder="请输入反馈内容" v-model="content" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" style="padding-right:5px;margin-top:15px;float:right">
                      <el-button size="small" align="center" class="filter-item" type="success" icon="el-icon-edit" @click="getList()" style="float:right;padding-top:5px">搜  索</el-button>
                    </el-col>
                  </el-form>
            </el-row>
          </div>
          </div>
      </div>
      <div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  max-height="380"
                  size="small"
                  border fit highlight-current-row style="width: 100%;min-height:320;border:#eeeeee">
            <el-table-column align="center" label="系统名称" min-width="140px" prop="systemName">
            </el-table-column>
            <el-table-column align="center" label="创建人"  min-width="130px" prop="crtUser">
                
            </el-table-column>
            <el-table-column align="center" label="审核状态"  min-width="130px" prop="status">
               
            </el-table-column>
            <el-table-column align="center" label="反馈内容"  min-width="230px" prop="content">
                
            </el-table-column>
            <el-table-column align="center" label="回复内容"  min-width="230px" prop="reply">
                
            </el-table-column>
            <el-table-column align="center" label="回复人"  min-width="130px" prop="replyUser">
                
            </el-table-column>
            <el-table-column align="center" label="操 作"  min-width="120" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button style="width:24px;" type="text" size="small" @click="handleEdit(scope.row)">回复</el-button>
                    <!-- scope.row -->
                     <!-- <el-button style="width:45px;" type="text" size="small" @click="handleEditRole(scope.row)">查看详情</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <div>
        <!--回复-->
        <el-dialog title="回复" :visible.sync="dialogVisible" width="80%" top="8vh">
         <el-row>
            <el-col :span="20" style="min-height:130px;left:30px">
              <!--报纸-->
              <template>
                <el-form ref="copyRow" size="small" :rules="rulesNewspaper" :model="copyRow" label-width="200px">
                  <el-form-item label="回复" prop="reply">
                    <el-input size="small" v-model="input1"> </el-input>
                  </el-form-item>
               </el-form>
              </template>
           </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="cancles">取 消</el-button>
            <el-button size="small" type="primary" @click="saveDatas">发布</el-button>
            <el-button size="small" type="primary" @click="notSaveData">不发布</el-button>
           
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/newstyle.scss'
import {
  replyAppProble,//发布回复
  getAppProbleListAll,//问题列表
} from '@/api/systemManage/roleManagement'

import {
  isInnerOption,
  statusOptions,
  statusKeyValue,
  isInneNoKeyValue
} from '@/utils/allOptions'

export default {
  components: { },
  directives: {},
  data() {
    return {
      input1: '',
      // -------Options-----------
      isInnerOption,
      dialogVisible:false,//弹框
      copyRow:{},//存放回复内容
      statusOptions,
      // -------Options-----------
      // 0:检索 1:编辑/新建 2:配置岗位 3:配置权限
     
      tableKey: 0,
      list: [],//接口返回数据
      content: '',//审核状态
       systemName:'',
      crtUser:'',
      replyUser:'',
      listOption: [
        {
          status: '2',
          label: '审核不通过'
        },
        {
          status: '1',
          label: '审核通过'
        },
        {
          status: '0',
          label: '待审核'
        }
      ],
      listQuery: {
        rowBounds: {
          page: 1,
          rows: 10
        },
        condition: {
          name: {
            'property': 'name',
            'value': '',
            'type': 'LIKE'
          },
          isInner: {
            'property': 'isInner',
            'value': '',
            'type': 'EQ'
          },
          status: {
            'property': 'status',
            'value': '',
            'type': 'EQ'
          }
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      },
      status: '',//初始状态
      total: null,
      listLoading: false,
     
    }
  },
  // 画面刚进入method
  mounted() {
    this.getList();
  },
  filters: {
    yesOrNoFilter(target) {
      return isInneNoKeyValue[target]
    },
    statusFilter(target) {
      return statusKeyValue[target]
    }
  },
  methods: {
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuery.rowBounds.page = 1
      this.getList()
    },
    // 页面显示条数
    handleSizeChange(val) {
      this.listQuery.rowBounds.rows = val
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuery.rowBounds.page = val
      // this.listQuery.rowBounds.offset =
      // this.listQuery.rowBounds.limit * (val - 1) + 1
      this.getList()
    },
   
    handleEdit(row) {//点击回复
      this.dialogVisible=true
      this.copyRow = row
      this.input1 = this.copyRow.reply
    },
    saveDatas(){//发布
      var form = 'copyRow'
          this.$refs[form].validate(valid => {
            this.copyRow.reply = this.input1
             
            //传参
            let searchstr = {
              "reply":this.copyRow.reply,//回复内容
              "status":"1",
              "crtUser":"",
              "id":this.copyRow.id
            }
            replyAppProble(searchstr).then(response => {
              if (response.data.statusCode === 200) {
                    this.dialogVisible=false
                    this.listLoading = false
                    this.getList()
                    //this.copyRow.reply=""
                    this.$message({
                      message: '发布成功',
                      type: 'success'
                    })
                  } else {
                    this.$message.error('发布失败')
                  }
                })
          })
    },
    notSaveData(){//  取消发布
    this.copyRow.reply = this.input1
      //传参
       let searchstr = {
          "reply":this.copyRow.reply,//回复内容
          "status":"2",
          "crtUser":"",
          "id":this.copyRow.id
        }
        replyAppProble(searchstr).then(response => {
            if (response.data.statusCode === 200) {
                  this.dialogVisible=false
                  this.listLoading = false
                  //  this.copyRow.status=false
                  this.getList()
                  this.$message({
                    message: '取消发布成功',
                    type: 'success'
                  })
                } else {
                  this.$message.error('取消发布失败')
                }
              })
      },
      cancles(){//取消
        this.dialogVisible = false
        //this.copyRow.reply=this.copyRow.reply
      },
      getList() {//列表信息
        this.listLoading = true
        //传参
        let searchstr = {
          "order":'desc',
          "status":this.status,
          "crtUser":"",
          'content': this.content,
          "page":this.listQuery.rowBounds.page,
          "rows":this.listQuery.rowBounds.rows
        }
      getAppProbleListAll(searchstr).then(response => {//列表接口
          if (response.data.statusCode === 200) {
                this.list = response.data.rows
                this.total = response.data.total
                this.listLoading = false
              } else {
                this.$message.error('查询失败')
              }
            })
      },
   
  }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}
.select-container{
    padding: 10px 10px;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }
.item {
    margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
    padding: 3px 5px;
}
</style>
